<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>表单设计</title>
    <script type="text/javascript" th:src="@{/static/js/jquery-2.2.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery-ui-1.10.4.min.js} "></script>
    <script type="text/javascript" th:src="@{/static/form-builder/form-builder.min.js}"></script>
    <style>
        body{margin: 0px;}
        #fb-editor{width:100%;height:500px;}
        .formInfo{width:100%;height:50px;}
    </style>
</head>
<body>
    <div class="formInfo">表单编辑</div>
    <div id="fb-editor"></div>
<button onclick="editFormData()">保存配置</button>
<!--<button onclick="getFormJson()">获取数据</button>-->
<input type="text" id="form_id" th:value="${form_id}">
</body>
</html>
<script>
    var formBuilder;
    jQuery(function($) {
        var options = {
            i18n: {
                locale: 'zh-CN',
                location: 'http://localhost:8080/static/form-builder/formBuilder-languages-master/'
                //extension: '.ext'
                //override: {
                //    'en-US': {...}
                //}
            }
        };
        var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';
        var fbEditor = document.getElementById('fb-editor');
        formBuilder = $(fbEditor).formBuilder(options);
    });
    window.onload = function () {
        //方法内容
        getFormJson();
    }


    /**
     * 拖拽后保存表单的字段配置
     */
    function editFormData() {
        var obj = {};
        obj.json = JSON.stringify(formBuilder.actions.getData());
        obj.form_id = $("#form_id").val();
        $.post("/FormInfoController/editForm",obj,function(data){
            if(data.code=200){
                $("#form_id").val(data.form.id);
            }
        });
    }

    /**
     * 获取表单字段信息 渲染
     */
    function getFormJson(){
        $.post("/FormInfoController/getFormJson",{"form_id":$("#form_id").val()},function(data){
            console.info(data.formJson);
           if(data.code=200){
               //var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';

               //var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';
               //console.info(JSON.stringify(data.formJson));
               formBuilder.actions.setData(data.formJson);
            }
        });
    }


</script>